<template>
  <div class="step-results" v-if="data">
    <dl class="step-results-dl">
      <dt class="xh-type-name">
        <span class="title">核心参数及测算结果</span>
      </dt>
      <dd>
        <div class="step-results-flex">
          <section class="step-results-item">
            <el-table
              :row-class-name="tableRowClassName"
              header-cell-class-name="createoper-step-table-header"
              border
              :data="data.tab1"
              style="width: 100%"
            >
              <el-table-column prop="name" label="基本参数" />
              <el-table-column :formatter="formatterNumber" prop="value" label="参数值" />
            </el-table>
          </section>
          <section class="step-results-item">
            <el-table
              :row-class-name="tableRowClassName"
              header-cell-class-name="createoper-step-table-header"
              border
              :data="data.tab2"
              style="width: 100%"
            >
              <el-table-column prop="name" label="投资参数" />
              <el-table-column :formatter="formatterNumber" prop="value" label="参数值" />
            </el-table>
          </section>
          <section class="step-results-item">
            <el-table
              :row-class-name="tableRowClassName"
              header-cell-class-name="createoper-step-table-header"
              border
              :data="data.tab3"
              style="width: 100%"
            >
              <el-table-column prop="name" label="测算指标" />
              <el-table-column :formatter="formatterNumber" prop="value" label="测算结果" />
            </el-table>
          </section>
        </div>
      </dd>
    </dl>
    <dl class="step-results-dl" v-if="data.yuceData">
      <dt class="xh-type-name">
        <span class="title">数据预测</span>
      </dt>
      <dd>
        <div class="step-results-flex">
          <section class="step-results-item">
            <el-table
              :row-class-name="tableRowClassName"
              header-cell-class-name="createoper-step-table-header"
              border
              :data="data.yuceData.list"
              style="width: 100%"
            >
              <el-table-column prop="name" label="基本参数" />
              <el-table-column
                v-for="(item, index) in data.yuceData.columnList"
                :key="index"
                prop="value"
                :label="item + ''"
              >
                <template slot-scope="{ row }">
                  <span>{{ row.value[index].toLocaleString() }}</span>
                </template>
              </el-table-column>
            </el-table>
          </section>
        </div>
      </dd>
    </dl>
  </div>
</template>
<script>
export default {
  name: "",
  props: {
    data: {}
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  mounted() {},
  methods: {
    tableRowClassName({ row, rowIndex }) {
      return rowIndex % 2 ? "" : "createoper-step-warning-row";
    },

    formatterNumber(row, column) {

      if (row && row[column.property]) {
        // 后续再改，先简单判断下数字就千分位进位
        if (typeof row[column.property] === "number") {
          return row[column.property].toLocaleString();
        }
        return row[column.property];
      }
      return "";
    }
  }
};
</script>
<style lang="scss" scoped>
.step-results {
  padding: 20px;
  dd {
    margin-top: 10px;
  }
  &-flex {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  &-item {
    flex: 1;
    min-width: 30%;
    padding: 10px;
  }
  ::v-deep .el-table {
    td,
    th {
      * {
        font-size: 15px;
      }
    }
  }
}
</style>
